import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

export default function VideoImg() {
  const [image, setImage] = useState(null);
  const navigate = useNavigate()

  useEffect(() => {
    // 监听 storage 事件来捕获其他标签页或窗口中的 localStorage 更改
    window.addEventListener('storage', handleStorageChange);

    // 初始化时从 localStorage 获取 image, video 和 music
    const localImage = localStorage.getItem('image');

    if (localImage) setImage(localImage);

    // 清理事件监听器
    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

  const handleStorageChange = (event) => {
    switch (event.key) {
      case 'image':
        setImage(event.newValue || '');
        break;
      default:
        break;
    }
  };

  const handleNext = () => {
    navigate('/issue')
  }

  return (
    <div
      style={{
        position: 'relative',
        width: '100%',
        height: '100vh',
        overflow: 'hidden',
        backgroundColor: 'black'
      }}
    >
      {/* 背景图片 */}
      {image && (
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            backgroundImage: `url(${image})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
            zIndex: 0,
          }}
        />
      )}

      {/* 视频 */}
      {image && (
        <video
          autoPlay
          loop
          muted
          playsInline
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            zIndex: 1,
          }}
        >
          <source src={image} type="video/mp4" />
        </video>
      )}

      <button style={{
        backgroundColor: 'red',
        color: 'white',
        borderRadius: '50rem',
        width: '10rem',
        height: '3rem',
        textAlign: 'center',
        lineHeight: '3rem',
        position: 'absolute',
        bottom: '2rem',
        right: '2rem',
        zIndex: '1'
      }} onClick={handleNext}>
        下一步
      </button>
    </div>
  );
}